<template>
  <div class="pt10">
    <span class="table-tag" v-for="(item, index) in labelInfo.slice(0, 3)" :key="index">{{ item }}</span>
    <Poptip trigger="hover" :transfer="true" placement="bottom" popper-class="labelPopStyle" v-if="labelInfo.length > 3"
            style="display: inline-block !important;">
      <span class="table-tag font18" style="background-color: transparent;border: none;margin-right: 0;">···</span>
      <span slot="content" class="content">
        <span class="table-tag" v-for="(item, index) in labelInfo" :key="index">{{ item }}</span>
      </span>
    </Poptip>
  </div>
</template>
<script>
export default {
  name: "labelInfo",
  props: ["labelInfo"],
  created() {
  },
};
</script>
<style lang="less">
.table-tag {
  box-sizing: border-box;
  color: #0085ff;
  border: 1px solid rgb(0, 133, 255);
  background: rgba(0, 133, 255, 0.1);
  padding: 0 8px;
  margin-right: 7px;
  margin-bottom: 10px;
  border-radius: 2px;
  //max-width: 75px;
  //overflow: hidden;
  //text-overflow: ellipsis;
  //white-space: nowrap;
  display: inline-block;
  cursor: pointer;
  line-height: 22px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.labelPopStyle {
  .ivu-poptip-content {
    height: auto;
  }

  .ivu-poptip-body {
    padding: 10px 16px 0 16px;
  }

  .content {
    width: 400px;
    white-space: normal;
    word-break: break-all;
    overflow: auto;
    max-height: 20vh;
    display: block;
  }
}
</style>
